<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { KeyValues } from '../../utils/types';
import { FormInstance, FormItemRule } from 'element-plus';

const props = defineProps<{
  row?: any
}>()

const emit = defineEmits(['close', 'submitted'])

const form = ref<KeyValues>({})

const formRef = ref<FormInstance>()

const rules: { [k: string]: FormItemRule } = {
  // ruleName: { required: true, trigger: 'blur', message: '请输入规则名称' },
}

const close = () => emit('close')

const onOk = async () => {
  await formRef.value.validate()
  emit('submitted', { form: form.value })
}

onMounted(() => {
  if (props.row) {
    form.value = { ...props.row }
  }
})
</script>

<template>
  <ElDialog ref="dialogRef" title="编辑">
    <ElForm ref="formRef" label-width="6em" :model="form" :rules="rules">
      <ElFormItem label="类型" prop="ruleName">
        <ElInput placeholder="请输入"></ElInput>
      </ElFormItem>
      <ElFormItem label="数据值" prop="ruleName">
        <ElInput placeholder="请输入" ></ElInput>
      </ElFormItem>
      <ElFormItem label="标签名" prop="ruleName">
        <ElInput placeholder="请输入" ></ElInput>
      </ElFormItem>
      <ElFormItem label="描述" prop="ruleName">
        <ElInput placeholder="请输入" type="textarea" autosize ></ElInput>
      </ElFormItem>
      <ElFormItem label="排序" prop="ruleName">
        <ElSelect></ElSelect>
      </ElFormItem>
      <ElFormItem label="字数据类型" prop="ruleName">
        <ElSelect></ElSelect>
      </ElFormItem>
      <ElFormItem label="备注信息" prop="ruleName">
        <ElInput placeholder="请输入" type="textarea" autosize ></ElInput>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="close">取消</ElButton>
      <ElButton type="primary" @click="onOk">确定</ElButton>
    </template>
  </ElDialog>
</template>

